<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图效果</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		#myCarousel{
			width: 600px;
		}
	</style>
	<body>
		<!--
        	作者：zxy
        	时间：2019-07-29
        	描述：轮播图
        -->
        <!--
        	data-slide-to="0"从0开始
        	data-interval="1000" 每次自动轮播的时间
        -->
		<div class="container" id="myCarousel">              <!--滑动-->
			<div id="carousel-example-generic" class="carousel slide" data-interval="1000">
				                   <!--标志-->
				<ol class="carousel-indicators">
					<!--这里是底下的圆圈-->
					<li data-target="#carousel-example-generic" data-slide-to="0"
						class="active">
						
					</li>
					<li data-target="#carousel-example-generic" data-slide-to="1"
						class="active">
						
					</li>
					<li data-target="#carousel-example-generic" data-slide-to="2"
						class="active">
						
					</li>
				</ol>
				
				
				<!--具体内容-->
				<div class="carousel-inner">
					<div class="item active">
						<img src="img/1.png"  />
						<!--轮播图的说明性文字-->
						<div class="carousel-caption">
							<h3>德玛西亚</h3>
							<p>欢迎你！</p>
						</div>
					</div>
					<div class="item ">
						<img src="img/1.png" />
						<div class="carousel-caption">
							<h3>3年</h3>
							<p>我们一起成长，一起努力</p>
						</div>
					</div>
					<div class="item ">
						<img src="img/1.png" />
						<div class="carousel-caption">
							<h3>我们终将会成功</h3>
							<p>一起走向辉煌，回看我们的光辉岁月！</p>
						</div>
					</div>
				</div>
				
				<!--向左向右的图标-->
				<a class="left carousel-control" href="#carousel-example-generic"
					data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				
				<a class="right carousel-control" href="#carousel-example-generic"
					data-slide="next">
					<span class="glyphicon glyphicon-chevron-right"></span>
				</a>
			</div>
		</div>
		<script>
			$(".carousel").carousel({
				interval:2000//两秒换张图
			})
		</script>
	</body>
</html>
